<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 

        1.getTempFileURL 限制一次最多获取50条
     -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 视口标签 -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" href="static/css/member.css">
    <title>Web运营端-成员管理2</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-1.12.4.js"
        integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
    <!-- ElementUI -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 云开发Web SDK -->
    <script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>
    <!--  特点：
    1.直接在Windows对象上挂载cloud对象，在使用时直接cloud即可
        配置过程
        1.使用new cloud创建对象，传入对应的资源id和APPID
        2.使用cloud对象中的inti方法进行初始化
    -->
    <!-- 压缩zip用的库 -->
    <script src="./static/js/axios.min.js"></script>
    <script src="./static/js/jszip.js"></script>
    <script src="./static/js/FileSaver.min.js"></script>
    <!-- 导出excel -->
    <script src="./static/js/export.js"></script>
    <script src="./static/js/xlsx.full.min.js"></script>
    <script src="./static/js/js.cookie.min.js"></script>

    <style>
        .manage span:nth-child(1) {
            position: absolute;
            top: 30px;
            right: 200px;
        }


        .manage span:nth-child(2) {
            position: absolute;
            top: 30px;
            right: 298px;
        }

        .manage .member {
            background-color: rgb(51, 44, 122);
            margin-right: -18px;
        }

        .exportAll {
            display: none;
        }

        /* 同一级
        .exportMenu:hover+ .exportAll{
        
        display: block;
        } */
        /* 子父元素 */
        .exportMenu:hover .exportAll {

            display: block;
        }

        .exportAll:hover {
            display: block;
        }
    </style>
</head>

<body>
    <div id="root" v-loading="isLoading">
        <!-- 上椭圆背景 -->
        <div class="topborder">
            <div class="topcircle">
                <div class="purple"></div>
            </div>

            <div class="smallcircle"></div>
        </div>

        <!-- 下椭圆背景 -->
        <div class="bottomborder">
            <div class="bottomcircle">
                <div class="blue"></div>
            </div>

        </div>




        <!-- 白框 -->
        <div class="banner">
            <img class="boy" src="static/images/boy.svg" alt="图片">



            <!-- 导出 -->
            <span class="exportMenu" style="position: absolute;top: 0.9vh;right: 37.5vw;background-color:rgb(37, 202, 35) ;
                padding: 1vh;border-radius: 1.5vh;cursor: pointer;width: 4.5vw;">
                <div style="display: flex;justify-content: center;">
                    <img src="./static/images/export.svg" mode="widthFix" style="vertical-align:middle;cursor: pointer;"
                        @click="">
                    <span style="color:rgb(255, 255, 255);cursor: pointer;">导出</span>

                </div>
                <!-- 操作区域 -->
                <div class="exportAll" style="position: relative; z-index: 1000; border-radius: 5px;">
                    <!-- 三角 -->
                    <div style="width: 0;height:0;
                    border:10px solid transparent;
                    border-bottom-color:white;
                   position: absolute;top:-5px;left: 45px;">
                    </div>
                    <ul style="position:absolute;top: 10px;left: -2px;background-color: rgb(255, 255, 255);">
                        <li @click="exportExcel" style="margin-top: 5px;width: 100px;">
                            <img class="" style="vertical-align:middle" src="./static/images/Excel.svg" mode="widthFix">
                            <span style="font-size: 15px;">导出excel</span>

                        </li>
                        <li @click="exportApplication" style="margin-top: 5px;width: 100px;">
                            <img class="" style="vertical-align:middle" src="./static/images/zip.svg"
                                mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="">
                            <span style="font-size: 15px;">导出压缩包</span>
                        </li>
                    </ul>
                </div>
            </span>

            <!-- 添加成员 -->
            <span style="cursor: pointer;;background-color: rgb(90, 142, 255);border-radius: 1.5vh;position: absolute;top: 0.9vh;
             right: 44.5vw;padding: 1vh;display: flex;justify-content: space-between; width:4.8vw;"
                @click="dialogTableVisible=true">
                <img src="./static/images/addMember.svg" alt="" style="width:15px;">
                <span style="color:rgb(255, 255, 255);vertical-align:center">添加成员</span>

            </span>

            <!-- 搜索框 -->
            <div class="box">
                <img src="static/images/refresh.svg" width="20px">
                <form action="" class="parent">
                    <input style="outline: none;" type="text" class="search" placeholder="search" v-model="keyword">
                    <img src="static/images/search.svg" alt="图片" class="btn">
                </form>
            </div>


            <!-- 左侧边栏 -->
            <div class="left">
                <div class="picture">
                    <img :src="(personInfo.avatarUrl)?(personInfo.avatarUrl):('static/images/wechat.svg')" alt="user"  style="border-radius: 40px ;width:100%" >
                </div>
                <div class="name"><span>{{personInfo.realName}}</span></div>

                <aside>
                    <ul>
                        <li><a :class="select=='秘书处'?'select':1" @click="getMessage('秘书处')" href="#">秘书</a></li>
                        <li><a :class="select=='动画部'?'select':1" href="#" @click="getMessage('动画部')">动画</a></li>
                        <li><a :class="select=='影视部'?'select':1" href="#" @click="getMessage('影视部')">影视</a></li>
                        <li><a :class="select=='UI设计部'?'select':1" href="#" @click="getMessage('UI设计部')">UI</a></li>
                        <li><a :class="select=='PC技术部'?'select':1" href="#" @click="getMessage('PC技术部')">PC</a></li>
                        <li><a :class="select=='网络研发部'?'select':1" href="#" @click="getMessage('网络研发部')">网研</a></li>
                        <li><a :class="select=='新媒体运营部'?'select':1" href="#" @click="getMessage('新媒体运营部')">新媒体</a></li>
                    </ul>
                </aside>
            </div>





            <!-- 中间栏 -->
            <div class="center">
                <div class="table">
                    <table cellspacing="0" id="table">
                        <thead style="position: sticky;top:0" >
                            <tr>
                                <th><input type="checkbox" @click="selectAll" id="selectAll" :checked="isAll"></th>
                                <th>工号</th>
                                <th>姓名</th>
                                <th>职位</th>
                                <th>入职时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody style="border-radius: 3.5vh 0 0 0;">
                            <template>
                                <tr v-for="(item,index) in list " :key="item.realName" >
                                    <td  style="border-radius: 3.5vh 0 0 0"><input type="checkbox" @click="checkUser($event,item)" id="checkUser"
                                            name="checkbox" :checked="item.check">
                                    </td>
                                    <!-- 勾选思路，
                                    1.如果选中则向item添加select=true  √
                                    2.导出时遍历当前userInfo，拿到select为true的，然后储存在_openidArray √
                                    3.使用_openid查询到willing表中对应的,然后储存到fileidArray 
                                    4.遍历fileArrayID获得downloadURL
                                    5.压缩
                                    -->
                                    <td> </td>
                                    <td>{{ item.realName}}</td>
                                    <td>{{ item.Position}}</td>
                                    <td>{{ item.admitTime }}</td>
                                    <td>
                                        <ul>
                                            <li><a href="#"
                                                    @click="alertWindows(item._openid,item.realName,item.department,item.Position)">职位修改</a>
                                            </li>
                                            <li><a href="#" @click="deleteUser(item._openid,item.realName,index)">删除</a>
                                            </li>
                                            <li><button @click="viewApplication(item._openid)"
                                                    style="cursor: pointer;">查看报名表</button></li>
                                        </ul>
                                    </td>
                                </tr>
                            </template>

                        </tbody>
                    </table>
                    <!-- 只作为excel导出的table -->
                    <template>
                        <table id="checkItemArray" style="display: none">
                            <thead>
                                <tr>
                                    <th>工号</th>
                                    <th>姓名</th>
                                    <th>职位</th>
                                    <th>入职时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in checkItemArray" :key="item.realName">
                                    <td> </td>
                                    <td>{{ item.realName}}</td>
                                    <td>{{ item.Position}}</td>
                                    <td>{{ item.admitTime }}</td>
                                </tr>
                            </tbody>

                        </table>
                    </template>
                </div>
            </div>





            <!-- 右侧边栏 -->
            <div class="right">
                <img class="girl" src="static/images/girl.svg" alt="图片">
                <div class="mm">
                    <div class="max">
                        <ul>
                            <li>{{dArr[0].title}}</li>
                            <li>{{dArr[0].num}}</li>
                        </ul>
                        <span>MAX</span>
                    </div>
                    <div class="min">
                        <ul>
                            <li>{{dArr[6].title}}</li>
                            <li>{{dArr[6].num}}</li>
                        </ul>
                        <span>MIN</span>
                    </div>
                </div>
                <div class="chart">
                    <!-- 间隔色背景 -->
                    <table cellspacing="0">
                        <tbody>
                            <tr>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- 柱条 -->
                    <ul>
                        <li class="ui" :style="[{'height':ui*0.7+'vh'}]"><span>{{ui}}</span></li>
                        <li class="ms" :style="[{'height':ms*0.7+'vh'}]"><span>{{ms}}</span></li>
                        <li class="ys" :style="[{'height':ys*0.7+'vh'}]"><span>{{ys}}</span></li>
                        <li class="pc" :style="[{'height':pc*0.7+'vh'}]"><span>{{pc}}</span></li>
                        <li class="xmt" :style="[{'height':xmt*0.7+'vh'}]"><span>{{xmt}}</span></li>
                        <li class="dh" :style="[{'height':dh*0.7+'vh'}]"><span>{{dh}}</span></li>
                        <li class="wy" :style="[{'height':wy*0.7+'vh'}]"><span>{{wy}}</span></li>
                    </ul>
                    <!-- 底部部门名称 -->
                    <div class="text">
                        <span>UI</span>
                        <span>秘书</span>
                        <span>影视</span>
                        <span>PC</span>
                        <span>新媒体</span>
                        <span>动画</span>
                        <span>网研</span>
                    </div>

                    <h4>各部门人数总览</h4>
                </div>
            </div>

        </div>




        <!-- 管理按钮  调换顺序才能压住后一个 -->
        <div class="navigate">
            <a class="span1" href="#">成员管理</a>
            <a class="span2" href="usersmanage.html">用户管理</a>
        </div>

        <!-- 弹窗 -->
        <div id="myModal" class="modal">
            <!-- 弹窗内容 -->
            <div class="modal-content">
                <div class="modal-header">
                    <span class="close">&times;</span>
                    <h2>修改用户信息</h2>
                </div>
                <div class="modal-body">
                    <div><span>_openid:</span>{{openid}}</div>
                    <div><span>姓名:</span> <input type="text" v-model="realName" class="windowsInput"></div>
                    <div><span>隶属部门:</span>
                        <select v-model="department" class="windowsInput">
                            <option value="" style="display: none"></option>
                            <option value="网络研发部">网络研发部</option>
                            <option value="秘书处">秘书处</option>
                            <option value="UI设计部">UI设计部</option>
                            <option value="PC技术部">PC技术部</option>
                            <option value="宣传部">宣传部</option>
                            <option value="动画部">动画部</option>
                            <option value="新媒体运营">新媒体运营</option>
                            <option value="影视部">影视部</option>
                        </select>
                    </div>
                    <div><span>职位:</span>
                        <select name="" v-model="Position" class="windowsInput">
                            <option value="" style="display: none"></option>
                            <option value="正部长">正部长</option>
                            <option value="副部长">副部长</option>
                            <option value="干事">干事</option>
                        </select>

                    </div>
                    <button @click="changUser" style="height: 30px;font-weight: 700;">确定修改</button>
                </div>
                <div class="modal-footer">
                    <p style="text-align: right;">@By——网络研发部</p>
                </div>
            </div>

        </div>


        <el-dialog title="添加成员" :visible.sync="dialogTableVisible" width="30%">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label-position label="姓名" prop="realName">
                    <el-input v-model="ruleForm.realName"></el-input>
                </el-form-item>
                <el-form-item label="班级" prop="class">
                    <el-input v-model="ruleForm.class"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="ruleForm.email"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phoneNumber">
                    <el-input v-model="ruleForm.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="ruleForm.department" placeholder="请选择部门">
                        <el-option label="网络研发部" value="网络研发部"></el-option>
                        <el-option label="秘书处" value="秘书处"></el-option>
                        <el-option label="UI设计部" value="UI设计部"></el-option>
                        <el-option label="PC技术部" value="PC技术部"></el-option>
                        <el-option label="宣传部" value="宣传部"></el-option>
                        <el-option label="动画部" value="动画部"></el-option>
                        <el-option label="新媒体运营" value="新媒体运营"></el-option>
                        <el-option label="影视部" value="影视部"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="ruleForm.position" placeholder="请选择职位">
                        <el-option label="主席" value="主席"></el-option>
                        <el-option label="副主席" value="副主席"></el-option>
                        <el-option label="部长" value="部长"></el-option>
                        <el-option label="副部长" value="副部长"></el-option>
                        <el-option label="干事" value="干事"></el-option>
                        
                    </el-select>
                </el-form-item>
                <el-form-item label-position="right">
                    <el-button type="primary" @click="addMember">立即添加</el-button>
                    <el-button @click="resetForm()">重置</el-button>
                  </el-form-item>
            </el-form>

        </el-dialog>

    </div>




</body>
<script>
    //将微信挂载在Window上的cloud挂载到vue实例上
    Vue.prototype.Cookie = window.Cookies

    const c = window.cloud
    Vue.prototype.cloud = c
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    Vue.config.devtools = true;
    

    var vm = new Vue({
        el: "#root",
        data: {
            ruleForm: {
                realName: '',
                class: '',
                email: '',
                phoneNumber: '',
                department:'',
                position: '',
               
            },
            rules: {
                realName: [
                    { required: true, message: '请输入真实名字', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                class: [
                    { required: true, message: '请输入班级', trigger: 'blur' }
                ],
                email: [
                    { type: 'email', required: true, message: '请输入邮箱', trigger: 'blur' }
                ],
                phoneNumber: [
                    {  required: true, message: '请输入电话号码', trigger: 'blur' },
                    { min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur' }
                    
                ],
                department: [
                    {  required: true, message: '请至少选择一个部门', trigger: 'change' }
                ],
                position: [
                    { required: true, message: '请选择一个职位', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            },
            usersInfo: [{ realName: '案例' }], //储存显示的用户信息
            // userInfo 里的 item 的check 表示是否被选中
            select: "秘书处",
            list: [],
            keyword: '',
            openidArray: [],//储存选中的_openid
            /* ,
            inputValue: "好好学习，天天向上" */
            fileidArray: [], //
            downloadURL: [],
            checkItemArray: [],//选中的序列。，
            openid: "",//保存的临时
            realName: "",
            department: "网络研发部",
            Position: '',
            isLoading: false,//控制是否启用窗口加载
            FilearrayArray: [],//切割后的二级数组、
            ms: 0,
            dh: 0,
            ys: 0,
            ui: 0,
            pc: 0,
            wy: 0,
            xmt: 0,
            dArr: [{ title: '秘书处', num: 0 }, { title: '动画部', num: 0 }, { title: '影视部', num: 0 }, { title: 'UI设计部', num: 0 }, { title: 'PC技术部', num: 0 }, { title: '网研部', num: 0 }, { title: '新媒体', num: 0 }],
            newRealNmae: '',
            newClass: '',
            newEmail: '',
            newPhone: '',
            newDepartment: '',
            newPosition: '',
            dialogTableVisible: false,
            personInfo:{},

        },
        computed: {
            // 已经选中的数量
            checkedNumber: {
                get() {
                    console.log("改变了");
                    return this.list.reduce((pre, todo) => pre + (todo.check ? 1 : 0), 0)
                }


            },
            // 是否全部被勾中
            isAll: {
                get() {
                    console.log("isAll");
                    return this.checkedNumber == this.list.length && this.list.length != 0
                }
            }


            
        },
        methods: {
            resetForm(){
this.ruleForm={
                realName: '',
                class: '',
                email: '',
                phoneNumber: '',
                department:'',
                position: '',
               
            }
            },
            addMember() {
                if(this.ruleForm.department!=''||this.ruleForm.realName!=''||this.ruleForm.class!=''||this.ruleForm.email!=''||this.ruleForm.phoneNumber!=''||this.ruleForm.position!=''){
                this.db.collection("Users").add({
                    data:{
                        realName:this.ruleForm.realName,
                        _class:this.ruleForm.class,
                        email:this.ruleForm.email,
                        phoneNumber:this.ruleForm.phoneNumber,
                        Position:this.ruleForm.position
                    }
                }).then(res=>{
                    console.log(res);
                    this.$message({
                                    message: '添加成功',
                                    type: 'success'
                                });
                })
            }else{
                this.$message({
                                    message: '请完善信息',
                                    type: 'warning'
                                });
            }
            },
            spliceArray(array, number = 50) {
                var count = array.length
                var batchTime = Math.ceil(count / number);
                if (batchTime >= 2) {
                    var fileidArrayCount = [batchTime];
                    var spliceArray = []
                    // 1. 创建数组数组xxxcount 长度为batchtime  
                    // 2. 切割数组，按 50开始切
                    //3.切完的放进  count的[i]中
                    // 获取了 n个，然后让这个数组中包含 fileidArray i * (i+1)50的项
                    for (let i = 0; i < batchTime; i++) {
                        // console.log(i,batchTime);
                        var spliceArray = []
                        for (let j = i * 50; j < ((i + 1) * 50); j++) {
                            spliceArray.push(array[j]);
                            if (!(array[j + 1])) {
                                break;
                            }
                        }
                        // console.log("第一次走完了",spliceArray);
                        fileidArrayCount[i] = spliceArray;
                        // 

                    }
                    console.log("切割后的", fileidArrayCount);
                    return fileidArrayCount

                }
            },
            checkCookie() {
                // 如果存在cookie
                if (this.Cookie.get("personInfo")) {
                    let info = JSON.parse(this.Cookie.get("personInfo"));
                    this.personInfo=info
                    if (info) {
                        // console.log("用户已经登录");
                        // console.log("本地cookie为");
                        // console.log(info);
                        //对cookie内容进行校验
                        // console.log(info._openid);
                        this.db.collection("operationUsers").where({
                            email: info.email
                        }).get().then(res => {
                            if (res.data[0].webPassword == info.webPassword) {
                                console.log("cookie正确");

                            } else {
                                this.$message({
                                    message: '请勿盗用他人cookie',
                                    type: 'error'
                                });


                                location.href = "./index.html"
                            }
                        })
                    }
                    else {
                        console.log("用户未登录");
                        location.href = "./index.html"
                        // let personInfo={a:1,b:2}
                        // let jsontoString=JSON.stringify(personInfo)
                        // this.Cookie.set("personInfo",jsontoString,{expires:1})
                    }
                } else {
                    this.$message({
                        message: '请登录',
                        type: 'error'
                    });
                    location.href = './index.html'
                }

            },
            //配置微信
            async initWx() {
                //创建新的cloud实例
                var c1 = new this.cloud.Cloud({
                    identityless: true,
                    // 资源方 AppID 填自己的
                    resourceAppid: 'wx96f760966921f98a',
                    // 资源方环境 ID	填自己的
                    resourceEnv: 'cloud1-8g54d6xb74e96e7d'
                })
                //初始化,使用await将异步转化为同步
                await c1.init()
                console.log('初始化完成');
                this.cloud = c1
                this.db = this.cloud.database()
                this._=this.db.command;
            },
            async getData() {
                this.db.collection("Users")
                    .where({
                        department: "秘书处"
                    })
                    .get().then(res => {
                        this.dArr[0].num = this.ms = res.data.length
                        console.log('秘书处', this.ms, '人')
                    })
                this.db.collection("Users")
                    .where({
                        department: "动画部"
                    })
                    .get().then(res => {
                        this.dArr[1].num = this.dh = res.data.length
                        console.log('动画部', this.dh, '人')
                    })
                this.db.collection("Users")
                    .where({
                        department: "影视部"
                    })
                    .get().then(res => {
                        this.dArr[2].num = this.ys = res.data.length
                        console.log('影视部', this.ys, '人')
                    })
                this.db.collection("Users")
                    .where({
                        department: "UI设计部"
                    })
                    .get().then(res => {
                        this.dArr[3].num = this.ui = res.data.length
                        console.log('UI设计部', this.ui, '人')
                    })
                this.db.collection("Users")
                    .where({
                        department: "PC技术部"
                    })
                    .get().then(res => {
                        this.dArr[4].num = this.pc = res.data.length
                        console.log('PC技术部', this.pc, '人')
                    })
                this.db.collection("Users")
                    .where({
                        department: "网络研发部"
                    })
                    .get().then(res => {
                        this.dArr[5].num = this.wy = res.data.length
                        console.log('网络研发部', this.wy, '人')
                    })
                this.db.collection("Users")
                    .where({
                        department: "新媒体运营部"
                    })
                    .get().then(res => {
                        this.dArr[6].num = this.xmt = res.data.length
                        console.log('新媒体运营部', this.xmt, '人')
                        this.dArr.sort(this.sortBy('num'))
                        console.log('降序排序后：', this.dArr)
                    })
            },
            sortBy(i) {
                return function (m, n) {
                    return n[i] - m[i]//降序
                }
            },
            async getMessage(department = "秘书处") {
                console.log("获取信息");
                $("#selectAll").removeProp("checked")
                this.select = department
                // 1.根据侧边栏的不同，然后获取不同部门的人员
                /*1.写一个department参数，点击不同部门时传入不同参数
                    2.在方法中使用where分开 
                 */
                this.db.collection("Users").where({
                    department: department,
                    Position: this._.exists(true)
                }).get().then(res => {
                    console.log(res);
                    var dataArray = res.data
                    var arraryLength = res.data.length
                    this.usersInfo.splice(0, this.usersInfo.length)
                    for (let i = 0; i < arraryLength; i++) {
                        this.usersInfo.push(dataArray[i])
                    }
                    console.log(this.usersInfo);
                    this.list = this.usersInfo
                }
                )


            }
            ,
            viewApplication(_openid) {
                this.isLoading = true; //开启加载窗口
                // this.$refs.fileRef.dispatchEvent(new MouseEvent('click'))
                /*  1.先获取对应的openID，然后到willing表中查询其fileID
                    2.使用getTempFileURL获取下载路径，然后直接打开 */
                this.db.collection("Willings").where({
                    '_openid': _openid
                }).get().then(res => {

                    //res ---> data数组
                    console.log(res);
                    if (res.data.length) {
                        this.cloud.getTempFileURL({
                            fileList: [res.data[0].fileID],
                            success: res => {
                                // get temp file URL
                                console.log(res)
                                this.isLoading = false;//关闭加载窗口
                                window.open(res.fileList[0].tempFileURL, "_blank");
                            },
                            fail: err => {
                                // handle error
                            }
                        })
                    } else {


                        this.$message({
                            message: '该用户没有报名表',
                            type: 'info'
                        });
                        this.isLoading = false;
                    }
                })

            },
            async exportApplication() {
                /*  勾选思路，
                                1.如果选中则向item添加select=true  √
                                2.导出时遍历当前userInfo，拿到select为true的，然后储存在_openidArray √
                                3.使用_openid查询到willing表中对应的,然后储存到fileidArray √
                                4.遍历fileArrayID获得temperURl，构造对象数组downloadURl √
                                5.压缩 √
                                 */
                console.log("点了");
                // 将openidArray,fileidArray初始化
                this.openidArray = []
                this.fileidArray = []
                this.downloadURL = []

                for (let val of this.list) {
                    console.log("进来了");
                    if (val.check) {
                        console.log("修改后的");
                        this.openidArray.push(val._openid)
                    }
                }

                if (this.openidArray.length != 0) {
                    // console.log("选中");
                    // 3.使用_openid查询到willing表中对应的,然后储存到fileidArray  √
                    this.fileidArray = [] //初始化
                    for (let val of this.openidArray) {
                        await this.db.collection("Willings").where({
                            _openid: val
                        }).get().then(res => {
                            console.log(res);
                            this.fileidArray.push(res.data[0].fileID)
                        }).catch(error => {
                            console.log("获取fileID错误", errot);
                        })
                    }
                    console.log("fileArray");
                    console.log(this.fileidArray);

                    // 4.遍历fileArrayID获得temperURl，构造对象数组downloadURl √  ====>切割链接

                    // 一次最多50个
                    //如果数量超过50,则计算需要获取的次数，然后进行多次获取
                    var count = this.fileidArray.length
                    var batchTime = Math.ceil(ceicount / 50);
                    if (batchTime >= 2) {
                        var fileidArrayCount = this.spliceArray(this.fileidArray, 50)
                        //得到切割后的二重数组后，再将其拼起来。
                        var temperData = []
                        for (let i = 0; i < fileidArrayCount.length; i++) {
                            temperData = temperData.concat(fileidArrayCount[i])
                            //  [ [50个],[n个] ]
                        }
                        //    this.fileidArray=temperData;
                        this.FilearrayArray = temperData;
                        var oldData = [];
                        for (let val of this.FilearrayArray) {
                            await await this.cloud.getTempFileURL({
                                fileList: val,

                            }).then(res => {
                                oldData = oldData.concat(res.fileList)
                            })
                        }
                        var fileList = oldData;
                        //初始化
                        this.downloadURL = []
                        for (let val of fileList) {
                            var url = val.tempFileURL
                            var fileName = url.substring(url.indexOf("applicationForm") + 29, url.length);
                            var item = {
                                "fileUrl": url,
                                "fileName": fileName
                            }
                            this.downloadURL.push(item)

                        }
                        console.log("载入完成，downloadURL数组为");
                        console.log(this.downloadURL);
                        //调用接口,返回的是文件名称和URL的数组
                        this.getDownLoadZip(this.downloadURL, "录取文件打包.zip");

                    }

                    await this.cloud.getTempFileURL({
                        fileList: this.fileidArray,

                    }).then(res => {

                        // res => fileList(数组)=> tempFileURL
                        console.log(res);
                        var fileList = res.fileList
                        //初始化
                        this.downloadURL = []
                        for (let val of fileList) {
                            var url = val.tempFileURL
                            var fileName = url.substring(url.indexOf("applicationForm") + 16, url.length);
                            var item = {
                                "fileUrl": url,
                                "fileName": fileName
                            }
                            this.downloadURL.push(item)

                        }
                        console.log("载入完成，downloadURL数组为");
                        console.log(this.downloadURL);
                        //调用接口,返回的是文件名称和URL的数组
                        this.getDownLoadZip(this.downloadURL, "录取文件打包.zip");
                    }).catch(error => {
                        console.log(error);
                        console.log("获取downloadURL失败", error);
                    })
                    //


                } else {
                    this.$message({
                        message: '请勾选成员',
                        type: 'warning'
                    });
                }
            },
            checkUser(event, item) {
                // console.log(event); 
                console.log("被调用了");
                let check = event.target.checked;
                // let a = $("#checkUser").prop("checked") jquery获得状态
                if (check) {
                    //添加属性
                    // for(let val of this.list){
                    //     if(val._openid==openid){
                    //         val.check=true
                    //     }
                    // }
                    console.log("选中了");
                    this.list.forEach((todo) => {
                        if (todo._openid === item._openid) {
                            vm.$set(todo, 'check', true)
                        }

                    })
                } else {
                    console.log("取消了");
                    this.list.forEach((todo) => {
                        if (todo._openid === item._openid) {
                            vm.$set(todo, 'check', false)
                        }

                    })
                }
            },
            selectAll() {
                let ischeck = $("#selectAll").prop("checked")
                console.log(ischeck);
                if (ischeck) {
                    for (let val of this.list) {
                        // val.check = true; //添加新属性默认不会动态检测变化
                        vm.$set(val, "check", true)
                        console.log(val);
                    }
                    // $("input[name='checkbox']").prop("checked", "true");
                } else {
                    for (let val of (this.list)) {
                        // val.check = false;
                        vm.$set(val, "check", false)
                        console.log(val);
                    }
                    // $("input[name='checkbox']").removeProp("checked");
                }
            },

            //#region 
            //通过url获取图片数据
            getFile(url) {
                return new Promise((resolve, reject) => {
                    axios(url, {
                        method: "GET",
                        responseType: "blob",
                    })
                        .then((res) => {
                            console.log("res", res);
                            resolve(res);
                        })
                        .catch((error) => {
                            reject(error);
                        });
                });
            },

            getDownLoadZip(datas, fileName) {
                //创建实例
                const zip = new JSZip();

                const promises = []; //用于存储多个promise
                datas.forEach((item) => {
                    const promise = this.getFile(item.fileUrl).then((res) => {
                        const fileName = item.fileName + "";
                        //可参考官方文档进行传参
                        // https://stuk.github.io/jszip/documentation/api_jszip/file_data.html
                        zip.file(fileName, res.data, {
                            binary: true,
                        });
                    });
                    promises.push(promise);
                });

                Promise.all(promises).then(() => {
                    zip
                        .generateAsync({
                            type: "blob",
                            compression: "DEFLATE", // STORE：默认不压缩 DEFLATE：需要压缩
                            compressionOptions: {
                                level: 9, // 压缩等级1~9    1压缩速度最快，9最优压缩方式
                            },
                        })
                        .then((res) => {
                            saveAs(res, fileName ? fileName : "影视文件.zip"); // 利用file-saver保存文件
                        });
                });
            },
            //导出excel，
            // 1.先把选中的项目拿出来 ，放到checkItemArray
            // 2.把checkItemArray 放到一个新的table  ————> checkItemArray中，但是display设置为none ，让其不显示。
            // 3.导出时，选择新的table  
            exportExcel() {
                // 初始化
                this.checkItemArray = []
                for (let val of this.list) {
                    console.log("进来了");
                    if (val.check) {
                        console.log("修改后的");
                        this.checkItemArray.push(val)
                    }
                }
                if (this.checkItemArray.length > 0) {
                    console.log(this.checkItemArray);
                    setTimeout(() => {
                        var table1 = document.querySelector("#checkItemArray");
                        var sheet = XLSX.utils.table_to_sheet(table1);//将一个table对象转换成一个sheet对象
                        openDownloadDialog(sheet2blob(sheet), '成员名单.xlsx');
                    }, 1000);

                } else {

                    this.$message({
                        message: '请勾选成员',
                        type: 'warning'
                    });
                }


            },

            // 删除用户
            deleteUser(_openid, realName, index) {
                var result = "确认删除" + realName + "吗？"
                console.log(_openid);
                this.$confirm(result, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    this.db.collection('Users').where(
                        {
                            _openid: _openid
                        }).remove({
                            success: res => {
                                console.log(res);
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                this.usersInfo.splice(index, 1)
                            }
                        })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
                // if (result == true) {
                //     console.log("确认");
                //     this.db.collection('Users').where(
                //         {
                //             _openid: _openid
                //         }).remove({
                //             success: res => {
                //                 console.log(res);
                //                 this.usersInfo.splice(index, 1)
                //             }
                //         })
                // } else {
                //     console.log("取消");
                // }
            },
            alertWindows(_openid, realName, department, Position) {
                // 显示
                $("#myModal").css('display', 'block');
                // 关闭
                $(".close").bind("click", function () {
                    $("#myModal").css('display', 'none');
                })
                this.openid = _openid
                this.realName = realName
                this.department = department
                this.Position = Position
            },
            //修改用户信息
            changUser() {
                this.db.collection('Users').where({
                    _openid: this.openid
                }).update({
                    data: {
                        realName: this.realName,
                        department: this.department,
                        Position: this.Position
                    }
                }).then(res => {
                    console.log(res);
                    if (res.stats.updated) {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        // 关闭窗口
                        $(".modal").css('display', 'none')
                    }
                })
            },
            isPhone() {
        //获取浏览器navigator对象的userAgent属性（浏览器用于HTTP请求的用户代理头的值）
        var info = navigator.userAgent;
        //通过正则表达式的test方法判断是否包含“Mobile”字符串
        var isPhone = /mobile/i.test(info);
        //如果包含“Mobile”（是手机设备）则返回true
        if(isPhone){
            this.$message({
                            message: '为了方便您的使用,请使用电脑登录',
                            type: 'error'
                        });
                        location.href = "./error.html"
                        
        }else{
            // this.$message({
            //                 message: '电脑端登录',
            //                 type: 'success'
            //             });
        }
            }
        },

        async created() {
            await this.initWx();
            this.checkCookie();//必须在初始化后，因为要用到云数据库
            await this.getMessage();
            await this.getData();
           this.isPhone();

        },
        watch: {
            keyword: {
                deep: true,
                handler(val) {
                    console.log(val);
                    this.list = this.usersInfo.filter((p) => {
                        return ((p.realName.indexOf(val) !== -1) || (p.Position.indexOf(val) !== -1) || (p.admitTime.indexOf(val) !== -1))
                    })
                }

            },
        },

    })
</script>


</html>